<template>
    <div class="all">
        <!-- <div style="text-align:center;font-size:28px;font-weight:bold;">{{$route.name}}</div> -->
        <div class="search">
            <el-form ref="form" :model="carWashSearch" :inline="true" size="mini">
                <el-form-item label="日期：">
                    <el-date-picker
                        v-model="carWashSearch.dataTime"
                        type="daterange"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="pickerOptions"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchClick(2)">查 询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="btn" v-if="jurisdiction.update === 1">
            <el-button
                v-if="activeStatus == 1"
                size="medium"
                type="primary"
                @click="endActive()"
            >活动已开启</el-button>
            <el-button
                v-if="activeStatus == 0"
                size="medium"
                type="primary"
                @click="startActive()"
            >活动已停止</el-button>
        </div>
        <span v-else></span>
        <div class="table">
            <!-- 表格 -->
            <el-table
                :data="carWashTable"
                border
                height="560"
                :style="{width:screenWidth+'px'}"
                :cell-style="cellStyle"
                :header-cell-style="rowClass"
                @selection-change="allSelectionChange"
            >
                <!-- <el-table-column type="selection" width="60px"></el-table-column> -->
                <el-table-column label="序号" width="80px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.id }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="时间" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.wash_time*1000 | formatDate }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="注册量" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.number }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="洗车台次" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.wash_number }}次</span>
                    </template>
                </el-table-column>
                <el-table-column label="洗车台次(小汽车)" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.car_num }}次</span>
                    </template>
                </el-table-column>
                <el-table-column label="洗车台次(SUV)" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.suv_num }}次</span>
                    </template>
                </el-table-column>
                <el-table-column label="洗车台次(MPV)" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.mpv_num }}次</span>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination
                @size-change="pageCount"
                @current-change="currentPageCount"
                :current-page="currentPage"
                :page-sizes="[100, 500,1000,1500, 2000]"
                :page-size="currentCount"
                layout="prev, pager, next, jumper, sizes,total"
                :total="pageResultSize"
            ></el-pagination>
        </div>
    </div>
</template>

<script>
import echarts from "echarts";
import "../../../static/scss/page.scss";
import utils from "../../util/request";
import {formatDate} from "../../util/time.js";
import {timetamp} from "../../util/time.js";
import {timedata} from "../../util/time.js";
export default {
    data() {
        return {
            jurisdiction: null,
            activeStatus: 0, //当前活动状态：0：开启，1：结束
            // 分页
            currentPage: 1, //初始页面
            currentCount: 100, //当前页面的数据数量
            pageResultSize: 10, //表格数据总数
            screenWidth: window.innerWidth, //可视宽度
            carWashSearch: {
                //搜索
                dataTime: "" //时间段
            },
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                }
            },
            carWashTable: [
                {
                    wash_time: "2020-08-15", //时间
                    number: "10", //注册量
                    wash_number: "10", //洗车台次
                    car_num: "5", //洗车台次(小汽车)
                    suv_num: "3", //洗车台次(SUV)
                    mpv_num: "2" //洗车台次(MPV)
                },
                {
                    wash_time: "2020-08-15", //时间
                    number: "10", //注册量
                    wash_number: "10", //洗车台次
                    car_num: "5", //洗车台次(小汽车)
                    suv_num: "3", //洗车台次(SUV)
                    mpv_num: "2" //洗车台次(MPV)
                },
                {
                    wash_time: "2020-08-15", //时间
                    number: "10", //注册量
                    wash_number: "10", //洗车台次
                    car_num: "5", //洗车台次(小汽车)
                    suv_num: "3", //洗车台次(SUV)
                    mpv_num: "2" //洗车台次(MPV)
                },
                {
                    wash_time: "2020-08-15", //时间
                    number: "10", //注册量
                    wash_number: "10", //洗车台次
                    car_num: "5", //洗车台次(小汽车)
                    suv_num: "3", //洗车台次(SUV)
                    mpv_num: "2" //洗车台次(MPV)
                }
            ]
        };
    },
    filters:{
        // 时间
		formatDate(time){
			var date = new Date(time);
			return formatDate(date, 'yyyy-MM-dd');
		},
		formatDateBehind(time){
			var date = new Date(time);
			return formatDate(date, 'hh:mm:ss')
		}
    },
    methods: {
        searchClick(num) {
            // 查询
            let data = {page:this.currentPage,list_rows:this.currentCount}
            if(this.carWashSearch.dataTime !== "" && this.carWashSearch.dataTime !== null){
                data.start_time = timetamp(String(this.carWashSearch.dataTime[0]));//开始时间
                data.end_time = timedata(this.carWashSearch.dataTime[1]);//结束时间))
            }
            utils.request("/oneMoneyRecord/list", "post",JSON.stringify(data)).then(res => {
                // console.log(res);
                this.carWashTable = res.data.data.data;
                this.pageResultSize = res.data.data.toatl;
                if(num === 2){
                    res.data.data.total 
                    ? this.$message({
                        message: "找到"+res.data.data.total+"条超时信息",
                        type: "success"
                    }) : this.$message("没有符合条件的数据")
                }else{return}
            });
        },
        endActive() {
            // 开启活动时点击按钮要关闭活动
            this.activeStatus = 0; //关闭活动
            utils.request("/oneMoneyState/update","post",JSON.stringify({id:1,state:this.activeStatus})).then(resp=>{
                // console.log(resp)
                this.$message({
                    message: "一元洗车活动成功关闭",
                    type: "success"
                })
            })
        },
        startActive() {
            //结束活动时点击按钮要开启活动
            this.activeStatus = 1; //开启活动
            utils.request("/oneMoneyState/update","post",JSON.stringify({id:1,state:this.activeStatus})).then(resp=>{
                // console.log(resp)
                this.$message({
                    message: "一元洗车活动开启成功",
                    type: "success"
                })
            })
        },
        //   表格居中
        cellStyle: function({ row, column, rowIndex, columnIndex }) {
            return "text-align:center;";
        },
        rowClass: function({ row, rowIndex }) {
            return "text-align:center;";
        },
        allSelectionChange: function(val) {
            // 获取选中的内容
            console.log(val);
            this.selectTable = val;
        },
        // 每页数据的数量
        pageCount: function(val) {
            this.currentCount = val;
            this.searchClick(1)
        },
        // 点击的第几页
        currentPageCount: function(val) {
            this.currentPage = val;
            this.searchClick(1)
        }
    },
    mounted() {},
    created() {
        let Base64 = require("js-base64").Base64;
        let menuarr = JSON.parse(Base64.decode(sessionStorage.getItem("menuarr")))
        for(var i=0;i<menuarr.length;i++){
            // console.log(menuarr[i].link)
            if(menuarr[i].link === this.$route.path){
                this.jurisdiction = menuarr[i]
            }else{}
        }
        // 一元洗车活动的状态
        utils.request("/oneMoneyState/list","post",JSON.stringify({page:1,list_rows:10})).then(resp=>{
            // console.log(resp)
            this.activeStatus = resp.data.data.data[0].state;
        })
        this.searchClick(1)
        // 一元洗车活动总表
        // let data = {page:this.currentPage,list_rows:this.currentCount}
        // utils.request("/oneMoneyRecord/list", "post",JSON.stringify(data)).then(res => {
        //     // console.log(res);
        //     this.carWashTable = res.data.data.data;
        // });
    }
};
</script>




